<html>
<head>
<title>inputExChart</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Additional styles -->
<style>
#container {
	background-color: #ccccff;
	width: 80%;
	margin: 20px auto;
	padding: 30px;
	border: 15px solid #eeeeff;
}
#container .title {
	font-size: 16pt;
	font-weight: bold;
	margin-bottom: 10px;
}

#container .subtitle {
	font-size: 14pt;
	font-weight: bold;
	margin-bottom: 10px;
}

#container table#mainTable {
	width: 100%;
}

#container table#mainTable td.splitcell {
	vertical-align: top;
	width: 50%;
}

#htmlFormContainer {
	margin: 20px;
}

#url {
	width: 100%;
}
</style>

</head>

<body class="yui-skin-sam">
	
	<div id='container'>
		<p class="title">inputExChart</p>
		<p class="description">
			Enter the desired configuration and click the 'Update' button.<br />
			This application is an example for the <a href="http://javascript.neyric.com/inputex">inputEx Library</a>.<br />
		</p>
		
		<table id='mainTable'>
			<tr>
				<td class="splitcell">
					<p class="subtitle" style="margin-top: 20px;">Data :</p>
					<div id='htmlFormContainer'>
					</div>
				</td>
		
				<td class="splitcell">
		
					<p class="subtitle" style="margin-top: 20px;">Preview :</p>
					<p class="description" id='preview'>
						<button id='updateButton'>Update</button>
					</p>
		
					<img src='../images/space.gif' id='chart'/>
					<br />
					Url:
					<input type='text' id='url' />
				</td>
			</tr>
		</table>
	</div>

<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../lib/yui/resize/resize-min.js"></script>
<!-- InputEx -->
<script src="../build/inputex-min.js"  type='text/javascript'></script>
<script>

YAHOO.inputEx.spacerUrl = "../images/space.gif";

YAHOO.util.Event.addListener(window, "load", function() {
	
	var form = null;
	
	var updateChart = function() {
		
		var val = form.getValue();
		var url = 'http://chart.apis.google.com/chart?';
	
		var colors = val.colors;
		for(var i = 0 ; i < colors.length ; i++) {
			colors[i] = colors[i].substr(1);
		}
		
		var series = val.series;
		for(var i = 0 ; i < series.length ; i++) {
			series[i] = series[i].join(',');
		}
	
	  var params = ['cht=lc',
								  'chs='+val.width+'x'+val.height,
									'chtt='+encodeURI(val.title),
									'chl='+encodeURI(val.labels.join('|')),
									'chco='+colors.join(','),
									'chd=t:'+series.join('%7C')
								];
		
		url += params.join('&');
		
		var chart = YAHOO.util.Dom.get('chart');
		chart.src = url;
		
		var urlInput = YAHOO.util.Dom.get('url');
		urlInput.value = url;
		
	};
	
	YAHOO.util.Event.addListener('updateButton', 'click', updateChart);
	
	form = new YAHOO.inputEx.Form({
		parentEl: 'htmlFormContainer',
		fields: [
	      { inputParams: {label: 'Title', name: 'title', value: 'My Graph'} },
				{ type: 'integer', inputParams: {label: 'Width', name: 'width', value: 320} },
				{ type: 'integer', inputParams: {label: 'Height', name: 'height', value: 240} },
				{ type: 'list', inputParams: {label: 'Labels', name: 'labels', value:['Q1','Q2','Q3','Q4']}},
				{ type: 'list', inputParams: {label: 'Colors',name: 'colors', elementType: {type: 'color', inputParams:{} }, value: ['#ff0000','#00ff00','#0000ff','#ffff00'] }},
				{ type: 'list', inputParams: {
					label: 'Series',
					name: 'series', 
					elementType: {
						type: 'list', 
						inputParams: { type: 'integer', inputParams: {} }
					},
					value: [[10,20,30,40],[40,30,20,10],[15,15,15,15],[0,10,25,50]]
				}}
		]
	});

	updateChart();
});

</script>
	
</body>
</html>

